<template>
  <div class="fieldList">
    <el-card>
      <template #header>
        <div class="header">
          拖拽进行排序
        </div>
      </template>

      <el-table ref="dragTable" :data="userTable" style="width: 100%">
        <el-table-column prop="field" width="60" label="锚点">
          <template #default="scope">
            <el-icon style="cursor:move"><Rank /></el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="label" label="字段描述"> </el-table-column>
        <el-table-column prop="prop" label="列表字段"> </el-table-column>
        <el-table-column prop="label" label="是否返回">
          <template #default="scope">
            <el-switch v-model="scope.row.visible" size="mini"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="label" label="固定位置">
          <template #default="scope">
            <el-select
              v-model="scope.row.fixed"
              placeholder="固定位置"
              size="mini"
              clearable
              style="width: 140px"
            >
              <el-option label="不固定" value="" />
              <el-option label="固定到列头" value="left" />
              <el-option label="固定到列尾" value="right" />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div class="aic jcc mt20">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  shallowRef,
  toRaw,
  nextTick,
} from "vue";
import { userTableFields } from "../mock/index";
import Sortable from "sortablejs";
const userTable = ref(userTableFields);
const draggingIndex = shallowRef(null); // 记录拖拽行的索引
// 项目列表数据
const dragTable = ref();
const state = reactive({});
//行拖拽
function dragSort() {
  let that = this;
  // 首先获取需要拖拽的dom节点
  let tableDom = dragTable.value.$el;
  const el1 = tableDom.querySelectorAll(".el-table__body")[0];
  Sortable.create(el1.querySelector("tbody"), {
    disabled: false, // 是否开启拖拽
    ghostClass: "sortable-ghost", //拖拽样式
    animation: 150, // 拖拽延时，效果更好看
    group: {
      // 是否开启跨表拖拽
      pull: false,
      put: false,
    },
    onEnd: (event) => {
      // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
      let copyData = JSON.parse(JSON.stringify(toRaw(userTable.value)));
      var newIndex = event.newIndex;
      var oldIndex = event.oldIndex;
      // 更新items数组
      var item = copyData.splice(oldIndex, 1);
      copyData.splice(newIndex, 0, item[0]);

      userTable.value = [];
      nextTick(() => {
        userTable.value = copyData;
      });
    },
  });
}

// 排序的方法
function sortMethods(type) {
}
const handleSave = () => {
};
onMounted(() => {
  dragSort();
});
</script>

<style scoped lang="scss">
.fieldList {
}
</style>
